<template>
  <el-dialog :visible.sync="dialogVisible" title="关联销项发票明细" width="1200px" v-drag2anywhere
    :close-on-click-modal="false">
    <div class="title">基本信息</div>
    <el-row style="margin-bottom: 20px;">
      <el-col :span="6">
        <span style="font-weight: bold;">购方单位:</span>{{formData.clientname}}
      </el-col>
      <el-col :span="4">
        <span style="font-weight: bold;">收货人:</span>{{formData.client}}
      </el-col>
      <el-col :span="5">
        <span style="font-weight: bold;">联系电话:</span>{{formData.buyerinfo.mobile}}
      </el-col>
      <el-col :span="8">
        <span style="font-weight: bold;">收货地址:</span>{{formData.buyerinfo.address}}
      </el-col>
    </el-row>
    <div class="title">销售明细</div>
    <div>
      <el-table :data="formData.goods" border>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="商品名称" prop="title" width="240px"></el-table-column>
        <el-table-column label="规格型号" prop="model" width="120px" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="品牌" prop="brand" width="80px" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="单位" prop="unit" width="80px" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="单价" prop="price" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="数量" prop="count" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="数量" prop="total" width="60px" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="备注" prop="dmemo" show-overflow-tooltip></el-table-column>
        <el-table-column label="所属账套" prop="account" width="180px" show-overflow-tooltip
          align="center"></el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 10px; padding: 5px;"></div>
    <div class="title">已关联销项发票明细</div>
    <div style="text-align: right;">
      <el-button type="primary" @click="handleFilter">关联销项明细</el-button>
    </div>
    <div>
      <el-table :data="bindlist" border>
        <el-table-column label="序号"></el-table-column>
        <el-table-column label="税收分类及名称">
          <template v-slot="scope">
            {{scope.row.taxname}}{scope.row.title}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <SaleticketDetailFilterUI v-if="salefilterVisible" ref="saleticketFilterUI"></SaleticketDetailFilterUI>
  </el-dialog>
</template>

<script>
  import SaleticketDetailFilterUI from './saleticketdetailfilter.vue'
  export default {
    components:{
      SaleticketDetailFilterUI
    },
    data() {
      return {
        index: -1,
        formData: {
          goods: []
        },
        bindlist:[],
        dialogVisible: false,
        salefilterVisible: false,
      }
    },
    methods: {
      init(index, data) {
        this.index = index;
        this.formData = data;
        console.log(data);
      },
      handleFilter() {
        this.salefilterVisible = true;
        this.$nextTick(()=>{
          this.$refs.saleticketFilterUI.dialogVisible=true;
          this.$refs.saleticketFilterUI.init();
        })
      }
    }
  }
</script>

<style>
</style>
